import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: false,
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround, //设置居中
          children: [
            ElevatedButton(
                //ElevatedButton 普通按钮
                onPressed: () {
                  print("普通按钮");
                },
                child: const Text("普通按钮")),
            TextButton(
                onPressed: () {
                  print("文本按钮");
                },
                child: const Text("文本按钮")),
            OutlinedButton(
                onPressed: () {
                  print("边框按钮");
                },
                child: const Text("边框按钮")),
            IconButton(
                onPressed: () {
                  print("图标按钮");
                },
                icon: const Icon(Icons.thumb_up))
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton.icon(
              onPressed: () {
                print("带图标的普通按钮");
              },
              label: const Text("发送"),
              icon: const Icon(Icons.send),
            ),
            TextButton.icon(
                onPressed: (){
                  print("带图标的文本按钮");
                },
                icon: const Icon(Icons.info),
                label: const Text("消息")
            ),
            OutlinedButton.icon(
                onPressed: (){
                  print("带图标的边框按钮");
                },
                icon: const Icon(Icons.add),
                label: const Text("增加")
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton.icon(
              style: ButtonStyle(     //设置按钮样式
                backgroundColor: MaterialStateProperty.all(Colors.red),   //设置背景颜色
                foregroundColor: MaterialStateProperty.all(Colors.blue),  //设置字颜色
                shape: MaterialStateProperty.all(
                    RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20), //设置圆角
                    ),
                ),
              ),
              onPressed: () {
                print("带图标的普通按钮");
              },
              label: const Text("发送"),
              icon: const Icon(Icons.send),
            ),
            TextButton(
              style: ButtonStyle(     //设置按钮样式
                shape: MaterialStateProperty.all(     //设置圆形按钮
                  const CircleBorder(side: BorderSide(color: Colors.blue))
                ),
              ),
              onPressed: () {
                print("圆形按钮");
              },
              child: const Text("圆形"),
            ),
            SizedBox(           //按钮无法单独设置大小,需要外层嵌套一层widget来设置大小
              height: 60,
              width: 200,
              child: ElevatedButton(
                onPressed: (){
                  print("大按钮");
                },
                child: const Text("大按钮"),
              ),
            )
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Expanded(
              flex: 1,
              child: Container(
                margin: const EdgeInsets.all(10),
                child: ElevatedButton(
                  onPressed: (){
                    print("自适应按钮");
                  },
                  child: const Text("自适应按钮"),
                ),
              ),
            ),
          ],
        )
      ],
    );
  }
}
